<template>
  <div class="gu_Container">
    <div class="areaView">
      <input
        type="text"
        :placeholder="placeholderText"
        readonly
        @click="showArea"
        v-model="selectValue"
      >
      <div class="arrow"><van-icon name="arrow" /></div>
    </div>
    <van-popup v-model="show" position="bottom">
      <van-picker :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
    </van-popup>
  </div>
</template>
<script>
export default {
  name: "downSelect",
  props: {
    //提示文字
    placeholderText:{
      default: "请选择",
      type:String
    },
    //下拉框列表数据
    columns:{
      required: true,
      type:Array
    }
  },
  data() {
    return {
    selectValue:"",
      //显示弹出层
      show: false
    };
  },
  mounted() {
  },
  methods: {
    //显示地区选择器
    showArea() {
      this.show = true;
    },
    // 确定选择
    onConfirm(value, index) {
     this.selectValue=value;
      this.show = false;
    },
    //取消选择
    onCancel() {
      this.show = false;
    }
  }
};
</script>
<style scoped>
.van-popup {
  width: 100%;
}
.areaView {
  width: 100%;
  position: relative;
}
.areaView input {
  width: 100%;
  height: 0.3rem;
  border: none;
  background: #eeeeee;
  padding:0 0.1rem;
  border-radius: 0.03rem;
}
.arrow{
   position: absolute;
  top:0;
  right:0;
  height:100%;
  display:flex;
  align-items: center;
  justify-content: center;
  width:.1rem;

}
</style>


